<template>
  <view class="main">
    <!-- 导航栏 -->
    <u-navbar :is-back="false" title="灭火器信息" title-size="40"> </u-navbar>

    <!-- 按钮 -->
    <u-button class="btn" type="primary" v-on:click="add" style="position: fixed; top: 150rpx; width: 100%; height: 80rpx; z-index: 999;">添加</u-button>

    <u-toast ref="uToast" />

    <!-- 删除灭火器信息警告 -->
    <u-modal
      v-model="removeShow"
      title="警告"
      content="是否删除此灭火器信息!"
      show-cancel-button
      @confirm="remove"
    ></u-modal>

    <!-- 添加灭火器信息弹窗 -->
    <u-modal
      v-model="addShow"
      title="导入灭火器信息"
      :show-cancel-button="true"
      @confirm="addSubmit"
    >
      <u-form class="add-form" :model="form">
        <u-form-item
          label="编号："
          prop="id"
          label-width="190rpx"
          label-align="right"
          :border-bottom="false"
        >
          <u-input v-model="form.id" disabled placeholder="请输入灭火器编号" />
        </u-form-item>
        <u-form-item
          label="地点信息："
          prop="location"
          label-width="190rpx"
          label-align="right"
          :border-bottom="false"
        >
          <u-input v-model="form.location" placeholder="请输入地点信息" />
        </u-form-item>
      </u-form>
    </u-modal>

    <!-- 灭火器信息详情弹窗 -->
    <u-modal
      v-model="editShow"
      title="灭火器信息"
      :show-cancel-button="true"
      @confirm="editSubmit"
    >
      <u-form class="form">
        <u-form-item
          label="灭火器编号："
          prop="id"
          label-width="225rpx"
          label-align="right"
        >
          <u-input
            v-model="editInfo.id"
            type="number"
            maxlength="5"
            placeholder="请输入灭火器编号"
            disabled
          />
        </u-form-item>
        <u-form-item
          label="地点信息："
          prop="location"
          label-width="200rpx"
          label-align="right"
        >
          <u-input
            v-model="editInfo.location"
            placeholder="请输入地点信息"
            style="line-height: 5rpx"
          />
        </u-form-item>
        <u-form-item
          label="状态："
          prop="status"
          label-width="150rpx"
          label-align="right"
        >
          <u-radio-group v-model="editInfo.status">
            <u-radio
              v-for="(item, index) in status"
              :key="index"
              :name="item.name"
              :disabled="item.name != editInfo.status"
            >
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item
          label="备注："
          prop="other"
          label-width="150rpx"
          label-align="right"
        >
          <u-input
            v-model="editInfo.other"
            type="textarea"
            placeholder="没有补充的信息"
            disabled
          />
        </u-form-item>
      </u-form>
    </u-modal>

    <!-- 灭火器信息列表 -->
	<view style="margin-top: 70rpx; padding-bottom: 30rpx;">
		<u-swipe-action
		    class="info"
		    :show="info.show"
		    :index="index"
		    :options="options"
		    v-for="(info, index) in info_list"
		    :key="info.id"
		    @click="click"
		  >
		    <view class="infodetail">
		      <p class="title">{{ info_title.id }}:</p>
		      <p class="content">{{ info.id }}</p>
		    </view>
		    <view class="infodetail">
		      <p class="title">{{ info_title.location }}:</p>
		      <p class="content">{{ info.location | ellipsis }}</p>
		    </view>
		    <view class="infodetail">
		      <p class="title">{{ info_title.status }}:</p>
		      <p
		        class="content"
		        :class="[
		          info.status == '正常' ? 'color-green' : '',
		          info.status == '故障' ? 'color-red' : '',
		          info.status == '其他' ? 'color-yellow' : '',
		        ]"
		      >
		        {{ info.status }}
		      </p>
		    </view>
		    <view class="infodetail">
		      <p class="title">{{ info_title.other }}:</p>
		      <p class="content">{{ info.other | ellipsis }}</p>
		    </view>
		  </u-swipe-action>
		
		  <u-divider half-width="200" margin-top="100" margin-bottom="30"
		    >没有更多数据了</u-divider
		  >
		
		  <view style="text-align: center; font-size: 2rpx; color: #c1bebf"
		    >作者：AICHI</view
		  >
		</view>
	</view>
    
</template>

<script>
import {
  insertInfo,
  removeInfo,
  removeAllInfo,
  updateInfo,
  selectInfo,
} from "@/api/info";
import { dateFormat } from "@/api/dateUtil.js";
var that;
export default {
  data() {
    return {
      editShow: false,
      removeShow: false,
      addShow: false,
      info_title: {
        id: "编号",
        location: "地点信息",
        status: "状态",
        other: "备注",
      },
      editInfo: {
        id: "",
        location: "",
        status: "",
        other: "",
        time: "",
        check: "",
      },
      form: {
        id: "",
        location: "",
        status: "正常",
        other: "",
        time: "空",
        check: "",
      },
      info_list: null,
      status: [
        {
          name: "正常",
        },
        {
          name: "故障",
        },
        {
          name: "其他",
        },
      ],
      options: [
        {
          text: "详情",
          style: {
            backgroundColor: "#007aff",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#dd524d",
          },
        },
      ],
    };
  },
  filters: {
    ellipsis(value) {
      if (!value) return "无";
      if (value.length > 12) {
        return value.slice(0, 12) + "...";
      }
      return value;
    },
  },
  methods: {
    // 初始化数据
    init() {
      selectInfo().then(function (data) {
        that.info_list = data;
        that.info_list.forEach((item) => {
          item.show = false;
        });
      });
    },
    // 添加扫码灭火器信息
    add() {
      uni.scanCode({
        success: function (res) {
          // console.log('条码类型：' + res.scanType);
          // console.log('条码内容：' + res.result);
          that.form.id = res.result;
          that.addShow = true;
        },
      });
    },
    // 删除灭火器信息
    remove() {
      this.$refs.uToast.show({
        title: "删除灭火器信息成功！",
        type: "success",
        position: "top",
      });
      removeInfo(this.editInfo);
      this.init();
      this.removeShow = false;
    },
		// 下拉刷新
    onPullDownRefresh() {
      this.init();
      this.$refs.uToast.show({
        title: "刷新数据成功！",
        type: "success",
        position: "top",
      });
	  uni.reLaunch();
      uni.stopPullDownRefresh();
    },
    // 滑动详情	, 删除事件
    click(index, index1) {
      this.editInfo = JSON.parse(JSON.stringify(this.info_list[index]));
      if (index1 == 1) {
        this.removeShow = true;
      } else {
        this.editShow = true;
      }
    },
    // 添加灭火器信息提交
    addSubmit() {
      this.addShow = true;
      if (this.form.id == "") {
        this.$refs.uToast.show({
          title: "灭火器编号不能为空！",
          type: "error",
          position: "top",
        });
      } else if (this.form.location == "") {
        this.$refs.uToast.show({
          title: "地点信息不能为空！",
          type: "error",
          position: "top",
        });
      } else {
        const that = this;
		let date = new Date();
		this.form.time = dateFormat("YYYY-mm-dd HH:MM", date);
        insertInfo(this.form)
          .then(function (code) {
            that.$refs.uToast.show({
              title: "导入灭火器信息成功！",
              type: "success",
              position: "top",
            });
            that.init();
          })
          .catch(function onRejected(error) {
            if (error.code == -1404) {
              that.$refs.uToast.show({
                title: "已存在灭火器信息！",
                type: "error",
                position: "top",
              });
            } else {
              that.$refs.uToast.show({
                title: "导入灭火器信息失败！",
                type: "error",
                position: "top",
              });
            }
          });
        this.addShow = false;
        this.form = {
          id: "",
          location: "",
          status: "正常",
          other: "",
        };
      }
    },
    // 编辑灭火器信息提交
    editSubmit() {
      if (this.editInfo.location == "") {
        this.$refs.uToast.show({
          title: "地点信息不能为空！",
          type: "error",
          position: "top",
        });
        this.show = true;
      } else {
        this.$refs.uToast.show({
          title: "修改灭火器信息成功！",
          type: "success",
          position: "top",
        });
        updateInfo(this.editInfo);
        this.init();
      }
    },
  },
  created() {
    this.init();
  },
  onLoad() {
    that = this;
  },
};
</script>

<style lang="less">
.main {
  font-size: 40rpx;

  .btn {
    margin-top: 2rpx;
    border-radius: 0rpx;
  }

  .add-form {
    width: 550rpx;
    margin: 0 auto;
  }

  .slot-wrap {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
  }

  .info {
    background-color: #f3f4f6;
    padding: 15rpx 0;

    .infodetail {
      .title {
        color: #606266;
        display: inline;
        margin-left: 30rpx;
      }

      .content {
        color: #606266;
        display: inline;
        margin-left: 25rpx;
      }

      .color-green {
        color: #19be6b;
      }

      .color-red {
        color: #fa3534;
      }

      .color-yellow {
        color: #ff9900;
      }
    }
  }
}
</style>
